<template>
    <div id="placehotsession">
        <div class="hot-month-title">
            <h3>当季热门</h3>
            <router-link to='' class='hsnohz'>
                <i class="el-icon-paperclip">&nbsp;还没有护照?</i>
            </router-link>
        </div>
        <div class="ul-box">
          <div class="ul-discountInfo">
            <ul>
              <li v-for='item in 12'>
                <div class='Disinfo'>
                  {{ item }}月
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="hotInfo">
            <div class="ul-box">
              <div class="ul-discountInfo">
                <ul>
                  <li v-for='items in hotdiscout'>
                    <div class='hotimginfo'>
                      <img :src="items.img" alt="">
                      <div class="hot-img-info">
                          {{ items.info }}
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
        </div>      
    </div>
</template>


<script type="text/javascript">
    
    export default {
        name:'placehotsession',
        data(){
            return {
                hotdiscout:[
                    {
                        img:require('@/assets/place/hot1.jpg'),
                        info:'俄罗斯·圣彼得堡'
                    },
                    {
                        img:require('@/assets/place/hot2.jpg'),
                        info:'澳大利亚·塔斯马尼亚'
                    },
                    {
                        img:require('@/assets/place/hot3.jpg'),
                        info:'坦桑尼亚'
                    },
                    {
                        img:require('@/assets/place/hot4.jpg'),
                        info:'巴厘岛'
                    },
                    {
                        img:require('@/assets/place/hot5.jpg'),
                        info:'阿根廷'
                    }
                ]
            }
        }
    }


</script>


<style type="text/css" lang='less'>
    #placehotsession{
        .hot-month-title{
            margin:1.2em 0;
            padding:0 0.8em;
            display: flex;
            justify-content: space-between;
            h3{
                margin:0;
            }
            .hsnohz{
                color: #11bf79;
            }
        }
        .ul-box{
            height:2.5em;
            overflow-y:hidden;
            .ul-discountInfo{
            height:3em;
            overflow: auto;          
            ul{
                height:3em;
                list-style-type: none;
                margin:0;
                width:920px;
                padding:0 1em;
                overflow-x: auto;
                overflow-y: hidden;
                li{
                    float:left;
                    white-space: nowrap;
                .Disinfo{
                  border:1px solid #f0f0f0;
                  border-radius:10px;
                  margin-right: 10px;
                  width:4.5em;
                  height:2.5em;
                  text-align:center;
                  line-height: 2.5em;
                  background-color: white;
                }
              }
            }
          }
        }
        .hotInfo{
            margin:1.5em 0;
            .ul-box{
                height:200px;
                .ul-discountInfo{
                height:220px;      
                ul{
                    height:220px;
                    width:920px;
                    padding:0 1em;
                    li{
                        box-shadow: 0 10px 10px 0 rgba(0,0,0,.15);
                        margin-right:8px;
                        .hotimginfo{
                            background-color:transparent;
                            position:relative;
                            width:165px;
                            img{
                                position:relative;
                                top: 9px;
                                width:100%;
                                border-radius:8px;
                            }
                            .hot-img-info{
                                position:absolute;
                                bottom:-5px;
                                width:100%;
                                text-align:center;
                                padding:1em 1em;
                                font-size:1.2em;
                                color:white;
                                overflow:hidden;
                                white-space:nowrap;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
              }
            }
        }
    }
</style>
